<template>
  <view class="content">
    <view class="tuig">
      <view class="tuig-head">
        <view class="tuig-head-list">
          <text class="tuig-head-h4">{{user.settled+user.unsettlement}}</text>
          <text class="tuig-head-txt">推广总数</text>
        </view>
        <view class="tuig-head-list">
          <text class="tuig-head-h4">{{user.settled}}</text>
          <text class="tuig-head-txt">已结算人数</text>
        </view>
        <view class="tuig-head-list">
          <text class="tuig-head-h4">{{user.unsettlement}}</text>
          <text class="tuig-head-txt">未结算人数</text>
        </view>
      </view>
      <view class="tuig-box">
        <view class="tuig-box-bt">推广说明</view>
        <view class="tuig-k-txt">
          <text>1、点击下方按钮生成推广码（您的专属宣传海报）；</text>
          <text>2、分享给好友关注即可获得推广奖励；</text>
          <text>3、奖励采用线下现金结算方式，有意向可咨询热线：13697578503</text>
        </view>
      </view>
      <view class="tuig-btn">
        <button type="default" class="tgm-btn" @click="tuigck()">生成推广码</button>
      </view>
      <!-- <image :src="user.qrcode" id="kla" style="opacity: 1;"/> -->
    </view>
    <!-- 弹窗 -->
    <view class="tuig-tc" style="pointer-events: none;">
      <view class="tuig-tc-box">
		<image :src="base64" mode v-if="base64" class="immm" />
        <canvas canvas-id="myCanvas" id="sss" style="background-color:#fff"></canvas>
      </view>
      <view class="tuig-an" v-if="base64" style="pointer-events: auto;">
        <button type="default" class="xiaz-btn" @click="xiazai">保存图片</button>
        <button type="default" class="fenx-btn" open-type="share">立即分享</button>
        <!-- <button type="default" class="fenx-btn" @click="fenxiang">立即分享</button> -->
      </view>
      <view class="tuig-gbbtn" v-if="base64" style="pointer-events: auto;">
        <button type="default" class="tuigb-btn" @click="gbbtnck()">
          <image src="../../static/gbimg.png" mode />
        </button>
      </view>
    </view>
    <view class="tc-fbg" v-if="base64"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      base64: null,
      showView: false,
	  user: uni.getStorageSync("user"),
      share: {
        title: "花儿私厨",
        path: "/pages/index/index",
        imageUrl: "",
        desc: "",
        content: ""
      },
	 
    };
  },
	
  methods: {
    tuigck() {
	  //than.user.qrcode
      var than = this
      this.showView = true;
      let ww, hh;
      const query = uni.createSelectorQuery().in(this);
      query.select("#sss").boundingClientRect(data => {
          //获取canvas-dom
          ww = data.width; //准确的宽高
          hh = data.height;
          var ctx = uni.createCanvasContext("myCanvas"); //绑定画布
          var path = than.user.qrcode;
          uni.showLoading({
            //增加loading等待效果
            mask: true
          });
		  wx.getImageInfo({
		     src: path,//服务器返回的图片地址
		     success: function (res) {
		  	 //res.path是网络图片的本地地址
		  	 let Path = res.path;
		  	 ctx.setFillStyle('#fff')
		  	 ctx.fillRect(0,0, ww, hh);
		  	 ctx.drawImage('../../static/dian.png', 0, 0, ww, hh-100); //填充进图片
		  	 ctx.drawImage(Path, ww-90, hh-90, 80, 80); //填充进图片
		  	 ctx.setTextAlign('left')  //设置对于坐标点的对齐方式
		  	 ctx.setFillStyle('#333')  //设置内容2的文字样式
		  	 ctx.setFontSize(20);
		  	 ctx.setTextAlign('left')  //同上
		  	 ctx.fillText('花儿私厨',10,hh-60)
		  	 ctx.setFontSize(16);
		  	 ctx.fillText('邀请好友加入我们',10,hh-30)
		  	 ctx.draw(false, function () {
		  	   wx.canvasToTempFilePath({
		  		 canvasId: 'myCanvas',
		  	   })
		  	 });
		     },
		  });	
          setTimeout(() => {
            //不加延迟的话，base64有时候会赋予undefined
            uni.canvasToTempFilePath({
              canvasId: "myCanvas",
			  // src: 'https://hc.yknyddd.com/qrcode/promote_7.png';
              success: res => {
                this.base64 = res.tempFilePath;
                this.share.imageUrl = res.tempFilePath;
              }
            });
            uni.hideLoading();
          }, 3000);
        })
        .exec();
		 // console.log(codeimg);
    },
    gbbtnck() {
      this.base64 = null;
      this.showView = false;
    },
    fenxiang() {
      this.onShareAppMessage();
    },
    xiazai() {
      uni.saveImageToPhotosAlbum({
        filePath: this.share.imageUrl,
        success: function() {
          console.log(1314);
		  uni.showToast({
		    title: "保存至相册"
		  });
        }
      });
    },
    onShareAppMessage(res) {
      return {
        title: this.share.title,
        path: this.share.path,
        imageUrl: this.share.imageUrl,
        desc: this.share.desc,
        content: this.share.content,
        success(res) {
          uni.showToast({
            title: "分享成功"
          });
        },
        fail(res) {
          uni.showToast({
            title: "分享失败",
            icon: "none"
          });
        }
      };
    }
  }
};
</script>